﻿@{
    ViewBag.Title = "Home Page";
    Layout = null;
}
<link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<style>
    dd {
        cursor: pointer;
    }

    .site-active {
        padding-left: 20px !important;
    }
</style>
<div class="layui-layout layui-layout-admin">

    <div class="layui-header">
        <div class="layui-logo">苦糖果MES</div>

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    牛夫人
                </a>
            </li>
            <li class="layui-nav-item"><a href="/home/login">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test" id="leftmenu">
                <li class="layui-nav-item">
                    <a href="javascript:;">首页</a>

                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">基础数据</a>
                    <dl class="layui-nav-child">
                        <dd><a class="site-active" tab-name="用户管理" tab-url="/Account/AccountIndex" tab-layid="11">用户管理</a></dd>
                        <dd><a class="site-active" tab-name="角色管理" tab-url="/Role/RoleIndex" tab-layid="12">角色管理</a></dd>
                        <dd><a class="site-active" tab-name="权限管理" tab-url="/Permission/PermissionIndex" tab-layid="13">权限管理</a></dd>
                        <dd><a class="site-active" tab-name="字典明细管理" tab-url="/CustomerManagement/CustomerManagementShow" tab-layid="14">字典明细管理</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">主数据</a>
                    <dl class="layui-nav-child">
                        <dd><a class="site-active" tab-name="物料产品管理" tab-url="/MaterialManagement/MaterialSel" tab-layid="21">物料产品管理</a></dd>
                        <dd><a class="site-active" tab-name="物料产品分类" tab-url="/MaterialType/GetMaterialTypeView" tab-layid="22">物料产品分类</a></dd>
                        <dd><a class="site-active" tab-name="计量单位" tab-url="/UnitMeasure/UnitMeasureList" tab-layid="23">计量单位</a></dd>
                        <dd><a class="site-active" tab-name="客户管理" tab-url="/CustomerManagement/CustomerManagementShow" tab-layid="24">客户管理</a></dd>
                        <dd><a class="site-active" tab-name="供应商管理" tab-url="/Suppliers/Suppliers" tab-layid="25">供应商管理</a></dd>
                        <dd><a class="site-active" tab-name="车间设置" tab-url="/permission/person" tab-layid="26">车间设置</a></dd>
                        <dd><a class="site-active" tab-name="工作站" tab-url="/Workstation/WorkstationList" tab-layid="27">工作站</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">仓储管理</a>
                    <dl class="layui-nav-child">
                        <dd><a class="site-active" tab-name="仓库设置" tab-url="/WarehouseSetup/WarehouseSetupList" tab-layid="31">仓库设置</a></dd>
                        <dd><a class="site-active" tab-name="库存现有量" tab-url="/LvnventoryOnhand/LvnventoryOnhandList" tab-layid="32">库存现有量</a></dd>
                        <dd><a class="site-active" tab-name="人员管理" tab-url="/ProcurementWarehousingHome/ProcurementWarehousing" tab-layid="33">采购入库</a></dd>
                        <dd><a href="">到货通知</a></dd>
                        <dd><a class="site-active" tab-name="供应商退货" tab-url="/SupplierReturn/SupplierReturnList" tab-layid="34">供应商退货</a></dd>
                        <dd><a class="site-active" tab-name="生产领料" tab-url="/ProductionRequisition/ProductionRequisitionList" tab-layid="35">生产领料</a></dd>
                        <dd><a href="">生产退料</a></dd>
                        <dd><a href="">产品入库</a></dd>
                        <dd><a class="site-active" tab-name="销售出库" tab-url="/SalesOut/SalesOutList" tab-layid="38">销售出库</a></dd>
                        <dd><a class="site-active" tab-name="销售退货" tab-url="/SalesReturns/SalesReturnsList" tab-layid="39">销售退货</a></dd>
                        <dd><a href="">转移调拨</a></dd>
                        <dd><a href="">赋码管理</a></dd>
                        <dd><a href="">装箱管理</a></dd>
                        <dd><a href="">SN码</a></dd>
                        <dd><a href="">库存盘点</a></dd>
                        <dd><a href="">外协发料</a></dd>
                        <dd><a href="">外协入库</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">设备管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">设备类型设置</a></dd>
                        <dd><a href="javascript:;">设备台账</a></dd>
                        <dd><a href="javascript:;">点检保养项目</a></dd>
                        <dd><a href="javascript:;">点检保养计划</a></dd>
                        <dd><a href="javascript:;">维修单</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">工装夹具管理</a>
                    <dl class="layui-nav-child">
                        <dd><a class="site-active" tab-name="三峰环穿" tab-url="/test/Default" tab-layid="5">类型设置</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">工装夹具台账</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">生产管理</a>
                    <dl class="layui-nav-child">
                        <dd><a class="site-active" tab-name="三峰环穿" tab-url="/test/Default" tab-layid="5">生产工单</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">工序设置</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">工艺流程</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">生产排产</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">生产报工</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">质量管理</a>
                    <dl class="layui-nav-child">
                        <dd><a class="site-active" tab-name="三峰环穿" tab-url="/test/Default" tab-layid="5">常见缺陷</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">检测项设置</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">检测模板</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">待检任务</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">来料检验</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">过程检验</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">出货检验</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">排班管理</a>
                    <dl class="layui-nav-child">
                        <dd><a class="site-active" tab-name="三峰环穿" tab-url="/test/Default" tab-layid="5">班组设置</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">排班计划</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">节假日设置</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">排班日历</a></dd>

                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">报表管理</a>
                    <dl class="layui-nav-child">
                        <dd><a class="site-active" tab-name="三峰环穿" tab-url="/test/Default" tab-layid="5">报表清单</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">报表设计</a></dd>


                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">打印管理</a>
                    <dl class="layui-nav-child">
                        <dd><a class="site-active" tab-name="三峰环穿" tab-url="/test/Default" tab-layid="5">打印机配置</a></dd>
                        <dd><a class="site-active" tab-name="华山论剑" tab-url="/test/Index" tab-layid="6">打印模板</a></dd>


                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 tab简单风格 class= layui-tab-brief -->
        <div class="layui-tab " lay-allowClose="true" lay-filter="tabList">
            <ul class="layui-tab-title">
            </ul>
            <div class="layui-tab-content">
            </div>
        </div>
    </div>
</div>

<script src="~/libs/jquery/jquery.js"></script>
<script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
<script>
    //JavaScript代码区域  按需引入
    layui.use(['element', 'jquery'], function () {
        var element = layui.element,
            $ = layui.jquery;

        //触发事件
        var active = {
            tabAdd: function (name, url, layid) {
                if (url != "" && url != null && url != undefined) {
                    element.tabAdd('tabList', {
                        title: name //'选项卡的标题'
                        , content: '<iframe id="iframeMain" style="width: 100%" ; height="100%" ; scrolling="no" frameborder="no" src="' + url + '"></iframe>'//'选项卡的内容' //支持传入html
                        , id: layid//'选项卡标题的lay-id属性值'
                    });
                }
            },
            tabChange: function (layid) {
                element.tabChange('tabList', layid);
            }
        }

        //当点击有siteactive属性的标签时，即左侧菜单栏中内容 ，触发点击事件
        $('.site-active').on("click", function () {
            var dataid = $(this);
            var name = $(this).attr("tab-name");
            var url = $(this).attr("tab-url");
            var tab_layid = dataid.attr("tab-layid");

            //1、 判断tab-layid=layid的tab页是否打开
            if ($(".layui-tab-title li").length <= 0) {
                //1.1 初始状态：1个Tab页也没有打开
                active.tabAdd(name, url, tab_layid); //添加tab页
                active.tabChange(tab_layid)//转到该tab页
            }
            else {
                //1.2   判断该Tab页是否已打开
                var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
                $.each($(".layui-tab-title li"), function () {
                    //如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
                    if ($(this).attr("lay-id") == tab_layid) {
                        isData = true;
                    }
                })
                if (isData == false) {
                    //标志为false 新增一个tab项
                    active.tabAdd(name, url, tab_layid); //1.2.1  该Tab页未打开，则打开该tab页
                }
                active.tabChange(tab_layid)//1.2.2 转到该tab页
            }
            FrameWH();  //计算ifram层的大小
        });

        function FrameWH() { //计算ifram层的大小
            var h = $(window).height();
            $("iframe").css("height", h + "px");
        }

        $(window).resize(function () {
            FrameWH();
        })

        // $(function () {
        //     active.tabAdd('权限管理', "/permission/index", 1); //打开tab页
        //     active.tabChange(1)//转到该tab页
        //     FrameWH();
        // })
    });

</script>